<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!-- 拿到项目的根路径  放入到域对象中 。 -->
<c:set var="root" value="${pageContext.request.contextPath }" />
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>省市页面</title>
	<script type="text/javascript" src="${pageContext.request.contextPath}/jq/jquery-1.8.3.js"></script>
	<!-- 引入表单校验插件 -->
	<script src="js/jquery-1.11.3.min.js" type="text/javascript"></script>
	<script src="js/jquery.validate.min.js" type="text/javascript"></script>
	<script type="text/javascript">
		//init 方法 。查询所有的省以及直辖市 。让后将查询到的结果 放到第一个下拉框中 。province...省
		$(function (){
			var url = "${root}/LinkageServlet?state=init";
			$.post(url,function (data){
				$.each(data,function (){
					$("#province").append("<option value='"+this.id+"'>"+this.area_name+"</option>");
				});
			},"json");
		});
		
		$(function (){
			$("#province").change(function (){
				//alert(this.value);
				var url2 = "${root}/LinkageServlet?state=city&pid="+this.value;
				$.post(url2,function (data){
					$("#city").prop("length",1);
					$("#area").prop("length",1);
					$.each(data,function (){
						$("#city").append("<option value='"+this.id+"'>"+this.area_name+"</option>");
					});
				},"json");
			});
		});
		
		$(function (){
			$("#city").change(function (){
				//alert(this.value);
				var url3 = "${root}/LinkageServlet?state=area&cid="+this.value;
				$.post(url3,function(data){
					$("#area").prop("length",1);//变空之后 会产生一个小bug当查询直辖市的时候 ，由于清空之后只添加了一个option 所有值改变不了。
					$.each(data,function (){
						$("#area").append("<option value='"+this.id+"'>"+this.area_name+"</option>");
					});
				},"json");
			});
		})
		
		
		
		$(function(){
		
		$("#orderForm").validate({
			rules:{
				"province":{
					"required":true
				},
				"city":{
					"required":true
				},
				"area":{
					"required":true
				}
			},
			messages:{
				"city":{
					"required":"请填写省份",
				},
				"city":{
					"required":"请填写市区",
				},
				"area":{
					"required":"请填写县区"
				}
			},
			errorPlacement: function (error, element) { //指定错误信息位置
			      if (element.is(':radio') || element.is(':checkbox')) { //如果是radio或checkbox
		
			       error.appendTo(element.parent().parent()); //将错误信息添加当前元素的父结点后面
			     } else {
			       error.insertAfter(element);
			     }
			   }
		}); 
	})
		
	</script>
 </head>
  
  <body>
	<center>
		<select id="province" name="province">
		  <option value="none">--请选择省--</option>
		</select>
		<select id="city" name="city">
			<option value="none">--请选择市--</option>
		</select>
		<select id="area" name="area" >
			<option value="none">--请选择县或区--</option>
		</select>
	</center>
  </body>
</html>
		